<template>
  <el-dialog :append-to-body="true"
             :close-on-click-modal="false"
             :show-close="false"
             v-model="dialogTableVisible"
             width="800"
             class="edit-dialog">
    <template #header>
      <div class="flex justify-between items-center my-header">
        <h4 class="text-xl font-bold">导入数据</h4>
        <XIcon class="w-4 h-4 cursor-pointer" @click="close"/>
      </div>
    </template>
    <el-table :data="tableData" style="width: 100%">
      <!-- 动态渲染表头 -->
      <el-table-column
          v-for="(header, index) in tableHeaders"
          :key="index"
          :prop="header"
          :label="header"/>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button class="mr-2" @click="close">取消</el-button>
        <el-button type="primary" @click="save"> 保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref, watch} from "vue";
import {ElDialog} from "element-plus";

const emit = defineEmits(["close"]);
const props = defineProps({
  tableData: {
    type: Array,
    default: []
  },
  showDialog: {
    type: Boolean,
    default: false
  },
  tableHeaders: {
    type: Array,
    default: () => []
  }
})
const dialogTableVisible = ref(false);
const close = () => {
  dialogTableVisible.value = false;
  emit("close");
};
const save = () => {
  emit("save");
};
watch(
    () => props.showDialog,
    (val) => {
      if (val) dialogTableVisible.value = true;
    }
)
</script>


<style scoped lang="scss">

</style>